<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tc{
            text-align: center;
        }
        .mt5{
            margin-top: 15px;
        }


        .good_title{
            height: 20px;
            overflow: hidden;
        }
        .googs_list{
            width: 80%;
            margin: 50px auto 0;
            height: 300px;
            /* box-shadow: 0px 0px 5px #999; */
        }


        .googs_list ul li{
            width: 20%;
            float: left;
            box-sizing: border-box;
            height: 300px;
            border: 1px solid #999;
        }
        .googs_list ul li:hover{
            box-shadow: 0px 0px 3px #000;
        }

        .googs_list ul li img{
            width:150px;
            height: 150px;
        }


        table{
            width: 80%;
            margin:100px auto 150px;
            border-collapse: collapse;
            text-align: center;
        }

        tr,th,td{
            border: 1px solid #999;
            padding: 5px;
        }
        tr,th{
            height: 40px;
        }
        table img{
            width: 100px;
            height: 100px;
        }
        .count{
            width: 60px;
            text-align: center;
            vertical-align: bottom;
            height: 26px;
            line-height: 26px;
        }
        .btn{
            width: 40px;
            border: none;
            cursor: pointer;
            outline: none;
            font-size: 20px;
            height: 26px;
            line-height: 26px;
        }
        button{
            background: orange;
            border: none;
            color:whitesmoke ;
            width:85px;
            height: 30px;
            outline: none;
            cursor: pointer;
        }
        input{
            outline: none;
        }
         /* 清除内外边距 */
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        blockquote,
        /* structural elements 结构元素 */
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        /* list elements 列表元素 */
        pre,
        /* text formatting elements 文本格式元素 */
        fieldset,
        lengend,
        button,
        input,
        textarea,
        /* form elements 表单元素 */
        th,
        td {
            /* table elements 表格元素 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 设置默认字体 */
        body,
        button,
        input,
        select,
        textarea {
            /* for ie */
            /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
            font-family: "微软雅黑", sans-serif, inherit;
            /* 用 ascii 字符表示，使得在任何编码下都无问题 */
            font-size: 0.12rem;
        }

        h1 {
            font-size: 18px;
            /* 18px / 12px = 1.5 */
        }

        h2 {
            font-size: 16px;
        }

        h3 {
            font-size: 14px;
        }

        h4,
        h5,
        h6 {
            font-size: 100%;
        }

        address,
        cite,
        dfn,
        em,
        var {
            font-style: normal;
        }

        /* 将斜体扶正 */
        code,
        kbd,
        pre,
        samp,
        tt {
            font-family: "Courier New", Courier, monospace;
        }

        /* 统一等宽字体 */
        small {
            font-size: 12px;
        }

        /* 小于 12px 的中文很难阅读，让 small 正常化 */

        /* 重置列表元素 */
        ul,
        ol {
            list-style: none;
        }

        /* 重置文本格式元素 */
        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        abbr[title],
        acronym[title] {
            /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
            border-bottom: 1px dotted;
            cursor: help;
        }

        q:before,
        q:after {
            content: '';
        }

        /* 重置表单元素 */
        legend {
            color: #000;
        }

        /* for ie6 */
        fieldset,
        img {
            border: none;
        }

        /* img 搭车：让链接里的 img 无边框 */
        /* 注：optgroup 无法扶正 */
        button,
        input,
        select,
        textarea {
            font-size: 100%;
            /* 使得表单元素在 ie 下能继承字体大小 */
        }

        /* 重置表格元素 */
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* 重置 hr */
        hr {
            border: none;
            height: 1px;
        }

        /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
        html {
            overflow-y: scroll;
        }

        /*超出内容显示省略号*/
        .ellipsis {
            max-width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        /*清除浮动*/
        .clearfix {
            *zoom: 1;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            line-height: 0;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="googs_list tc">
        <div class="tc">
            <br>
            <h2>商品列表展示</h2>
            <br>
        </div>
        <ul class="list_ul">
            <!-- <li>
                <img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
                <div class="good_title mt5">
                    米家电磁炉
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
                <div class="good_title mt5">
                    米家电磁炉
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
                <div class="good_title mt5">
                    米家电磁炉
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
                <div class="good_title mt5">
                    米家电磁炉
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
                <div class="good_title mt5">
                    米家电磁炉
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li> -->
            
        </ul>
    </div>
    





    <table>
        <thead>
            <tr>
                <th>全选</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>
                    <input type="checkbox" name="" id="" value="" />
                </td>
                <td>
                    <p>
                        <img src="//i1.mifile.cn/a1/pms_1506417289.23728408.jpg" >
                        <br>
                        <span>米家压力IH电</span>
                    </p>
                </td>
                <td>
                    <button type="button" class="btn">-</button>
                    <input type="text" name="" id="" value="" class="count"/>
                    <button type="button" class="btn">+</button>
                </td>
                <td>
                    <span>3000元</span>
                </td>
                <td>
                    3000*2
                </td>
                <td>
                    <button type="button">删除</button>
                </td>
                <td>
                    2020/01/10
                </td>
            </tr> -->
            
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <label>
                        <input type="checkbox" name="check" class="quanxuan"/>
                        全选按钮
                    </label>
                </td>
                <td>
                    <button type="button" id="delChecked">
                        删除选中商品
                    </button>
                </td>
                <td colspan="4"></td>
                <td>
                    总价：<br>
                    <div id="sum">
                        
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>


<script src="JS/getDate.js"></script>
<script src="JS/index.js"></script>

</body>
</html>